<nz-row [nzGutter]="24" class="py-lg">
    <nz-col [nzSpan]="6">
        <nz-card nzTitle="个人设置" class="ant-card__body-nopadding">
            <a (click)="active=1" class="d-block py-sm px-md" [ngClass]="{'bg-primary-light text-white':active===1}">个人信息</a>
            <a (click)="active=2" class="d-block py-sm px-md" [ngClass]="{'bg-primary-light text-white':active===2}">密码</a>
        </nz-card>
    </nz-col>
    <nz-col [nzSpan]="18">
        <nz-card nzTitle="个人信息" *ngIf="active===1">
            <nz-row [nzGutter]="64">
                <nz-col [nzSpan]="16">
                    <form nz-form [formGroup]="profileForm" (ngSubmit)="profileSave($event, profileForm.value)" [nzLayout]="'vertical'">
                        <nz-form-item>
                            <nz-form-label nzFor="name" nzRequired>姓名</nz-form-label>
                            <nz-form-control>
                                <input nz-input formControlName="name" id="name">
                                <div *ngIf="name.invalid && (name.dirty || name.touched)">
                                    <nz-form-explain *ngIf="name.errors.required">The field is required</nz-form-explain>
                                    <nz-form-explain *ngIf="profileForm.hasError('maxlength', 'name')">最多30个字符</nz-form-explain>
                                </div>
                            </nz-form-control>
                        </nz-form-item>
                        <nz-form-item>
                            <nz-form-label nzFor="tel">电话</nz-form-label>
                            <nz-form-control>
                                <input nz-input formControlName="tel" id="tel">
                                <div>
                                    <nz-form-explain *ngIf="profileForm.hasError('maxlength', 'tel')">最多16个字符</nz-form-explain>
                                </div>
                            </nz-form-control>
                        </nz-form-item>
                        <nz-form-item>
                            <nz-form-label nzFor="mobile">手机</nz-form-label>
                            <nz-form-control>
                                <input nz-input formControlName="mobile" id="mobile">
                                <div>
                                    <nz-form-explain *ngIf="profileForm.hasError('maxlength', 'mobile')">最多16个字符</nz-form-explain>
                                </div>
                            </nz-form-control>
                        </nz-form-item>
                        <nz-form-item>
                            <nz-form-label nzFor="email">Email</nz-form-label>
                            <nz-form-control>
                                <input nz-input formControlName="email" id="email">
                                <div>
                                    <nz-form-explain *ngIf="profileForm.controls['email'].dirty&&profileForm.controls['email'].hasError('email')">最多50个字符</nz-form-explain>
                                </div>
                            </nz-form-control>
                        </nz-form-item>
                        <nz-form-item>
                            <nz-form-control>
                                <button *ngIf="canEdit" nz-button [nzType]="'primary'">保存</button>
                            </nz-form-control>
                        </nz-form-item>
                    </form>
                </nz-col>
                <nz-col [nzSpan]="8">
                    <h4>头像</h4>
                    <nz-upload class="avatar-uploader"
                        [nzAction]="uploadUrl"
                        [nzData]="avatarParam"
                        nzName="file"
                        [nzShowUploadList]="false"
                        [nzBeforeUpload]="beforeUpload"
                        (nzChange)="handleChange($event)">
                        <i *ngIf="!avatarUrl" class="anticon anticon-plus avatar-uploader-trigger"></i>
                        <img *ngIf="avatarUrl" [src]="avatarUrl" class="avatar">
                    </nz-upload>
                </nz-col>
            </nz-row>
        </nz-card>
        <nz-card nzTitle="修改密码" *ngIf="active===2">
            <nz-row [nzGutter]="64">
                <nz-col [nzSpan]="16">
                    <form nz-form [nzLayout]="'vertical'">
                        <nz-form-item>
                            <nz-form-label nzFor="old_password" nzRequired>旧密码</nz-form-label>
                            <nz-form-control>
                                <input nz-input [(ngModel)]="pwd.old_password" name="old_password" id="old_password" type="password" required>
                            </nz-form-control>
                        </nz-form-item>
                        <nz-form-item>
                            <nz-form-label nzFor="new_password" nzRequired>新密码</nz-form-label>
                            <nz-form-control>
                                <input nz-input [(ngModel)]="pwd.new_password" name="new_password" id="new_password" type="password" required>
                            </nz-form-control>
                        </nz-form-item>
                        <nz-form-item>
                            <nz-form-label nzRequired nzFor="confirm_new_password">再次输入新密码</nz-form-label>
                            <nz-form-control>
                                <input nz-input [(ngModel)]="pwd.confirm_new_password" name="confirm_new_password" id="confirm_new_password" type="password" required>
                            </nz-form-control>
                        </nz-form-item>
                        <nz-form-item>
                            <nz-form-control>
                                <button nz-button (click)="pwdSave()" [nzType]="'primary'">保存</button>
                            </nz-form-control>
                        </nz-form-item>
                    </form>
                </nz-col>
            </nz-row>
        </nz-card>
    </nz-col>
</nz-row>
